<template>
  <div class="hello">
    <div class="left">
      <div v-for="(v, i) in watchList" :key="i">
        <el-button
          style="width: 100%"
          size="medium"
          @click="handleBtnClick(v.net_segment)"
          >{{ v.net_segment }}</el-button
        >
      </div>
    </div>
    <div class="right">
      <div id="echart1"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import dayjs from "dayjs"; // ES 2015

let { option } = require("./echartOption");

import Api from "@/api/home.js";
export default {
  name: "HelloWorld",
  data() {
    return {
      watchList: [],
      myChart: null,
    };
  },
  props: {
    msg: String,
  },
  async created() {
    let { data } = await Api.watchList();
    this.watchList = data;
    this.handleBtnClick(data[0].net_segment);
  },
  mounted() {
    this.$nextTick(() => {
      let chartDom = document.getElementById("echart1");
      this.myChart = echarts.init(chartDom);
    });
  },
  methods: {
    async handleBtnClick(net_segment) {
      let res = await Api.ip({ net_segment });
      console.log(res);

      // res.data.forEach((v) => {
      //   v.lasttime == null ? (v.lasttime = 0) : null;
      // });

      let data1 = [];
      res.data.forEach((v) => {
        let r = parseInt(v.ip.split(".")[3] / 10);
        let h = parseInt(v.ip.split(".")[3] % 10);
        let diff = v.lasttime ? dayjs().diff(dayjs(v.lasttime), "h") : 9999;
        data1.push([h, r, diff]);
      });
      console.log(data1);

      option.series[0].data = data1;
      option.title.text = net_segment;
      console.log(option);
      this.myChart.resize();

      this.myChart.setOption(option);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  display: flex;
  height: 100%;
}
.left {
  width: 128px;
}

.right {
  flex-grow: 1;
}

#echart1 {
  width: 100%;
  height: 100%;
}
</style>
